<template>
  <v-chart autoresize :option="setOption()" class="chart"></v-chart>
</template>

<script setup lang="ts">
// 导入计算属性
import { computed } from 'vue'

// 导入 store 仓库
import useEchartStore from '@/stores/echart'

// 获取仓库实例
const echartStore = useEchartStore()

// 接收父组件传递过来的数据
const props = defineProps<{
  activeIndex: string
}>()

const orderFullYearAxis = computed(() => {
  return echartStore.storeEchartData.orderFullYearAxis
})
const orderFullYear = computed(() => {
  return echartStore.storeEchartData.orderFullYear
})
const userFullYearAxis = computed(() => {
  return echartStore.storeEchartData.userFullYearAxis
})
const userFullYear = computed(() => {
  return echartStore.storeEchartData.userFullYear
})

const setOption = () => ({
  title: {
    text: '销售趋势',
    textStyle: {
      fontSize: 14
    }
  },
  xAxis: {
    data: props.activeIndex == '1' ? orderFullYearAxis.value : userFullYearAxis.value
  },
  yAxis: {},
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '5%',
    right: '5%',
    top: '20%',
    buttom: '10%'
  },
  series: [
    {
      name: props.activeIndex == '1' ? '销售额' : '访问量',
      data: props.activeIndex == '1' ? orderFullYear.value : userFullYear.value,
      type: 'bar',
      barWidth: '30%' // 设置柱形图的宽度
    }
  ]
})
</script>

<style lang="scss" scoped>
.chart {
  height: 300px;
}
</style>
